import React, { useState } from 'react';
import { Table, Tag, Button, Select, Card, Row, Col, Typography, Space } from 'antd';
import { EyeOutlined } from '@ant-design/icons';
import PurchaseMaterialsModal from './PurchaseMaterialsModal';

const { Title } = Typography;
const { Option } = Select;

const mockProjects = [
    { id: 1, name: '上海中心大厦项目' },
    { id: 2, name: '杭州湾跨海大桥项目' }
];

const userMap = {
    1: '张三',
    2: '李四',
    3: '王五',
};

const mockSupplier = [
    { id: 1, name: '供应商A', type: 2 },
    { id: 2, name: '供应商B', type: 3 },
    { id: 3, name: '供应商C', type: 9 },
];

const mockPurchaseListTable = [
    {
        numbering: 'PO2023001',
        name: '上海中心大厦项目采购',
        purchaser: 1,
        project: 1,
        status: 1,
        total_cost: 5000
    },
    {
        numbering: 'PO2023002',
        name: '杭州湾跨海大桥项目采购',
        purchaser: 2,
        project: 2,
        status: 2,
        total_cost: 8000
    }
];

const PurchaseListTableStatus = {
    1: '草稿',
    2: '待审核',
    3: '已审核',
    4: '已完成',
    5: '已取消'
};

const getOrderStatusColor = (status) => {
    const colors = {
        1: 'blue',
        2: 'orange',
        3: 'green',
        4: 'cyan',
        5: 'red'
    };
    return colors[status] || 'default';
};

const PurchaseListPage = () => {
    const [selectedProject, setSelectedProject] = useState(null);
    const [selectedOrder, setSelectedOrder] = useState(null);
    const [materialsModalVisible, setMaterialsModalVisible] = useState(false);

    const handleViewMaterials = (orderNumber) => {
        setSelectedOrder(orderNumber);
        setMaterialsModalVisible(true);
    };

    const orderColumns = [
        {
            title: '采购单号',
            dataIndex: 'numbering',
            key: 'numbering',
            width: 120,
        },
        {
            title: '采购名称',
            dataIndex: 'name',
            key: 'name',
            width: 200,
        },
        {
            title: '采购员',
            dataIndex: 'purchaser',
            key: 'purchaser',
            render: (id) => userMap[id],
            width: 100,
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            render: (s) => (
                <Tag color={getOrderStatusColor(s)}>
                    {PurchaseListTableStatus[s]}
                </Tag>
            ),
            width: 100,
        },
        {
            title: '总金额',
            dataIndex: 'total_cost',
            key: 'total_cost',
            render: (cost) => `¥${cost.toLocaleString()}`,
            width: 100,
        },
        {
            title: '操作',
            key: 'action',
            width: 120,
            render: (_, record) => (
                <Button
                    type="link"
                    icon={<EyeOutlined />}
                    onClick={() => handleViewMaterials(record.numbering)}
                >
                    查看材料
                </Button>
            )
        }
    ];

    const filteredOrders = selectedProject
        ? mockPurchaseListTable.filter(o => o.project === selectedProject)
        : [];

    return (
        <div style={{ padding: '24px' }}>
            <Card>
                <Title level={2} style={{ marginBottom: '24px' }}>采购管理</Title>

                <Row gutter={[16, 16]} style={{ marginBottom: '24px' }}>
                    <Col span={24}>
                        <Space>
                            <span style={{ fontWeight: '500' }}>选择项目:</span>
                            <Select
                                style={{ width: 250 }}
                                placeholder="请选择项目"
                                onChange={(value) => {
                                    setSelectedProject(value);
                                    setSelectedOrder(null);
                                }}
                                allowClear
                            >
                                {mockProjects.map(p => (
                                    <Option key={p.id} value={p.id}>{p.name}</Option>
                                ))}
                            </Select>
                        </Space>
                    </Col>
                </Row>

                {selectedProject && (
                    <Card
                        title="采购订单"
                        size="small"
                        style={{ marginBottom: '24px' }}
                    >
                        <Table
                            dataSource={filteredOrders}
                            columns={orderColumns}
                            rowKey="numbering"
                            pagination={{
                                pageSize: 5,
                                showSizeChanger: false,
                                showTotal: (total, range) =>
                                    `第 ${range[0]}-${range[1]} 条，共 ${total} 条`
                            }}
                            scroll={{ x: 800 }}
                        />
                    </Card>
                )}
                <PurchaseMaterialsModal
                    visible={materialsModalVisible}
                    onCancel={() => setMaterialsModalVisible(false)}
                    selectedOrder={selectedOrder}
                />
            </Card>
        </div>
    );
};

export default PurchaseListPage;
